import React, { Component } from 'react';
import { Modal, Form, Card, Input, Select, Button, Cascader, InputNumber, DatePicker } from 'antd';
import moment from 'moment';
/* import 'moment/locale/zh-cn';
moment.locale('zh-cn'); */
const FormItem = Form.Item;
const options = [];
const Option = Select.Option;

class CardModal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };
  }

  showModelHandler = e => {
    if (e) e.stopPropagation();
    this.setState({
      visible: true,
    });
  };

  hideModelHandler = () => {
    this.setState({
      visible: false,
    });
  };

  okHandler = () => {
    const { onOk } = this.props;
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const val = {
          ...values,
          register_date: values['register_date'].format('YYYY-MM-DD'),
          cancel_card_date: values['cancel_card_date'].format('YYYY-MM-DD'),
          recover_card_date: values['recover_card_date'].format('YYYY-MM-DD'),
          pause_card_date: values['pause_card_date'].format('YYYY-MM-DD'),
        };
        onOk(val);
        this.hideModelHandler();
      }
    });
  };
  render() {
    const { children } = this.props;
    const { getFieldDecorator } = this.props.form;
    const {
      id,
      cardstate,
      card_type,
      is_deposit,
      card_deposit,
      register_date,
      register_source,
      cancel_card_date,
      recover_card_date,
      pause_card_date,
    } = this.props.record;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    return (
      <span>
        <span onClick={this.showModelHandler}>{children}</span>
        <Modal
          title="读者证编辑"
          visible={this.state.visible}
          onOk={this.okHandler}
          onCancel={this.hideModelHandler}
        >
          <Form layout="horizontal" onSubmit={this.okHandler}>
            <FormItem {...formItemLayout} label="读者证id">
              {getFieldDecorator('id', {
                initialValue: id,
              })(<Input />)}
            </FormItem>
            <FormItem {...formItemLayout} label="读者证状态">
              {getFieldDecorator('cardstate', {
                initialValue: cardstate,
              })(
                <Select placeholder="读者证状态">
                  <Option value="0">关闭</Option>
                  <Option value="1">运行中</Option>
                  <Option value="2">已上线</Option>
                  <Option value="3">异常</Option>
                </Select>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="读者证类型">
              {getFieldDecorator('card_type', {
                initialValue: card_type,
              })(
                <Select placeholder="读者证类型">
                  <Option value="vip">vip</Option>
                  <Option value="普通">普通</Option>
                </Select>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="读者证是否押金">
              {getFieldDecorator('is_deposit', {
                initialValue: is_deposit,
              })(
                <Select placeholder="读者证是否押金">
                  <Option value="是">是</Option>
                  <Option value="否">否</Option>
                </Select>
              )}
            </FormItem>
            <FormItem label="押金" {...formItemLayout}>
              {getFieldDecorator('card_deposit', {
                initialValue: card_deposit,
              })(<InputNumber size="middle" style={{ width: '100%' }} placeholder="押金" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="注册时间">
              {getFieldDecorator('register_date', {
                initialValue: moment(register_date, 'YYYY-MM-DD'),
              })(<DatePicker style={{ width: '100%' }} placeholder="注册时间" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="注册平台">
              {getFieldDecorator('register_source', {
                initialValue: register_source,
              })(
                <Select placeholder="注册平台">
                  <Option value="馆内">馆内</Option>
                  <Option value="网络">网络</Option>
                </Select>
              )}
            </FormItem>
            <FormItem {...formItemLayout} label="注销时间">
              {getFieldDecorator('cancel_card_date', {
                initialValue: moment(cancel_card_date, 'YYYY-MM-DD'),
              })(<DatePicker style={{ width: '100%' }} placeholder="注销时间" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="恢复时间">
              {getFieldDecorator('recover_card_date', {
                initialValue: moment(recover_card_date, 'YYYY-MM-DD'),
              })(<DatePicker style={{ width: '100%' }} placeholder="恢复时间" />)}
            </FormItem>
            <FormItem {...formItemLayout} label="暂停时间">
              {getFieldDecorator('pause_card_date', {
                initialValue: moment(pause_card_date, 'YYYY-MM-DD'),
              })(<DatePicker style={{ width: '100%' }} placeholder="暂停时间" />)}
            </FormItem>
          </Form>
        </Modal>
      </span>
    );
  }
}

export default Form.create()(CardModal);
